<template>
	<view>
		<!-- <view class="w100 " style="text-align: center;">
			<view class="s4">
				Get Started
			</view>
			<view class="s5">
				Let’s create your account
			</view>
		</view> -->
		<view class="w100 flex-center ">
			<image style="width: 400rpx;height: 400rpx;margin-top: 50rpx;" src='../../static/logo.png' mode=""></image>
		</view>
		<view class="body w100">


			<view class="size mb-20">
				用户昵称
			</view>
			<view style="display: flex;align-items: center;">
				<image class="mr-50" style="width: 40rpx;height: 40rpx;" src="../../static/images/home/zhu1.png"
					mode=""></image>
				<view style="display: flex;align-items: center;">
					<u--input placeholder="请输入用户昵称" border="none" v-model="info.nickname" color='#fff'></u--input>
				</view>
			</view>
			<view class="mt-30 mb-30" style="border: 1rpx solid rgba(83, 87, 112, 1);height: 1rpx;width: 100%;"></view>
			<view class="size mb-20">
				登陆账号
			</view>
			<view style="display: flex;align-items: center;">
				<image class="mr-50" style="width: 40rpx;height: 40rpx;" src="../../static/images/home/zhu2.png"
					mode=""></image>
				<view style="display: flex;align-items: center;">
					<u--input placeholder="请输入登陆账号" border="none" v-model="info.username" color='#fff'></u--input>
				</view>
			</view>
			<view class="mt-30 mb-30" style="border: 1rpx solid rgba(83, 87, 112, 1);height: 1rpx;width: 100%;"></view>
			<view class="size mb-20">
				手机号
			</view>
			<view style="display: flex;align-items: center;">
				<image class="mr-50" style="width: 40rpx;height: 40rpx;" src="../../static/images/home/zhu2.png"
					mode=""></image>
				<view style="display: flex;align-items: center;">
					<u--input placeholder="请输入手机号" border="none" v-model="info.user_phone" color='#fff'></u--input>
				</view>
			</view>
			<view class="mt-30 mb-30" style="border: 1rpx solid rgba(83, 87, 112, 1);height: 1rpx;width: 100%;"></view>
			<view class="size mb-20">
				验证码
			</view>
			<view class="input w100 " style="display: flex;align-items: center;">
				<u--input style="margin-left: 32rpx;color: #fff;" placeholder="请输入验证码" border="none" color='#fff'
					v-model="info.ver_code"></u--input>
				<view class="">
					<view class="resending flex-center" v-if="isSending">{{ '重新发送(' + counter + 's)' }}</view>
					<view class="resending flex-center" v-else @click="handleResend">发送验证码</view>
				</view>
			</view>
			<view class="mt-30 mb-30" style="border: 1rpx solid rgba(83, 87, 112, 1);height: 1rpx;width: 100%;"></view>
			<view class="size mb-20">
				交易密码
			</view>
			<view style="display: flex;align-items: center;">
				<image class="mr-50" style="width: 40rpx;height: 40rpx;" src="../../static/images/home/zhu3.png"
					mode=""></image>
				<view style="display: flex;align-items: center;">
					<u--input type='password' placeholder="请输入登录密码" border="none" v-model="info.pay_pass	"
						color='#fff'></u--input>
				</view>
			</view>

			<view class="mt-30 mb-30" style="border: 1rpx solid rgba(83, 87, 112, 1);height: 1rpx;width: 100%;"></view>
			<view class="size mb-20">
				登录密码
			</view>
			<view style="display: flex;align-items: center;">
				<image class="mr-50" style="width: 40rpx;height: 40rpx;" src="../../static/images/home/zhu3.png"
					mode=""></image>
				<view style="display: flex;align-items: center;">
					<u--input type='password' placeholder="请输入登录密码" border="none" v-model="info.password	"
						color='#fff'></u--input>
				</view>
			</view>
			<view class="mt-30 mb-30" style="border: 1rpx solid rgba(83, 87, 112, 1);height: 1rpx;width: 100%;"></view>
			<view class="size mb-20">
				BNB钱包地址
			</view>
			<view style="display: flex;align-items: center;">
				<image class="mr-50" style="width: 40rpx;height: 40rpx;" src="../../static/images/home/zhu4.png"
					mode=""></image>
				<view style="display: flex;align-items: center;">
					<u--input placeholder="请输入钱包地址" border="none" v-model="info.my_address	" color='#fff'></u--input>
				</view>
			</view>
			<view class="size mt-20 mb-20">
				邀请码
			</view>
			<view style="display: flex;align-items: center;">
				<!-- <image class="mr-50" style="width: 40rpx;height: 40rpx;" src="../../static/images/home/zhu3.png"
					mode=""></image> -->
				<view style="display: flex;align-items: center;">
					<u--input placeholder="请输入邀请码" border="none" v-model="info.sharecode" color='#fff'></u--input>
				</view>
			</view>
			<view class="mt-30 mb-30" style="border: 1rpx solid rgba(83, 87, 112, 1);height: 1rpx;width: 100%;"></view>
			<view class="" style="font-size: 26rpx;font-weight: 400;color: rgba(153, 153, 153, 1);" @click="login">
				已有账号？<text style="font-size: 26rpx;font-weight: 400;color: #fff;">立即登陆</text>
			</view>
			<view class="busts flex-center mt-40 " @click="register">
				注册账号
			</view>
			<view class="" style="height: 50rpx;">

			</view>
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {

				info: {
					nickname: '', //	昵称
					username: '', //登陆账号(手机号)
					user_phone: '', //	手机号
					ver_code: '', //	验证码(111111)
					password: '', //	密码
					my_address: '', //	地址
					pay_pass: '' //	支付密码
				},
				counter: 60,
				isSending: false,

			}
		},
		onLoad(option) {
			if (option.sharecode) {
				this.info['sharecode'] = option.sharecode
				uni.setStorageSync('sharecode', option.sharecode)
			}
		},
		methods: {
			// 注册： 
			async register() {
				if (this.info.user_phone == '') {
					uni.$u.toast("请填写手机号")
					return
				}
				if (this.info.nickname == '') {
					uni.$u.toast("请填写昵称")
					return
				}
				if (this.info.username == '') {
					uni.$u.toast("请填写登陆账号")
					return
				}
				if (!this.info.sharecode) {
					uni.$u.toast(uni.$u.toast("请填写登陆账号"))
					return
				}
				let param = {
					...this.info
				}
				let sharecode = uni.getStorageSync('sharecode')
				if (sharecode) {
					param.sharecode = sharecode
				}
				let res = await this.$http.post('user/user_register', param)
				if (res && res.code == 200) {
					uni.$u.toast('注册成功~')
					uni.$u.sleep(1000).then(() => {
						uni.navigateTo({
							url: 'login'
						})
					})
					if (sharecode) {
						uni.removeStorageSync('sharecode')
					}

				} else {
					uni.$u.toast(res.msg || '注册失败，请稍后重试~')
				}

			},
			// 重置倒计时
			reset() {
				this.isSending = false
				if (this.timer) {
					clearInterval(this.timer)
					this.counter = 60
					this.timer = null
				}
			},
			// 倒计时
			countDown() {
				this.counter = 60
				this.isSending = true
				this.timer = setInterval(() => {
					this.counter--
					if (this.counter < 0) {
						this.reset()
					}
				}, 1000)
			},
			handleResend() {
				if (this.info.user_phone == '') {
					uni.showToast({
						title: "请填写手机号",
						icon: 'none'
					})
					return
				}
				this.countDown()

			},
			login() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	page {
		background-color: #1E2240;
	}

	.input {
		height: 60rpx;

	}

	.resending {
		width: 183rpx;
		height: 85rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #fff;
		border-radius: 20rpx;
		background: rgba(30, 31, 35, 1);
	}

	.size {
		font-size: 28rpx;
		font-weight: 400;


		color: rgba(255, 255, 255, 1);
	}

	.body {

		padding: 50rpx 60rpx 0 60rpx;


		// height: 812rpx;
		border-radius: 64rpx 64rpx 0rpx 0rpx;
		background: #24294D;
	}

	.s1 {
		font-size: 64rpx;
		font-weight: 600;
		color: #fff;
	}

	.s4 {
		font-size: 44rpx;
		font-weight: 700;
		color: #fff;
	}

	.s5 {
		font-size: 28rpx;
		font-weight: 400;
		color: #fff;
	}

	.s2 {
		font-size: 28rpx;
		font-weight: 500;
		letter-spacing: 0rpx;
		line-height: 39.2rpx;
		color: rgba(118, 125, 255, 1);
	}

	.s3 {
		width: 328rpx;
		height: 106rpx;
		opacity: 1;
		border-radius: 80rpx;
		background: rgba(108, 106, 235, 1);
		box-shadow: 0rpx 40rpx 60rpx rgba(25, 28, 50, 0.1);
		font-size: 30rpx;
		font-weight: 600;
		color: #fff;
	}

	.body2 {
		width: 650rpx;
		height: 260rpx;
		opacity: 1;
		border-radius: 30rpx;
		background: #434769;
		padding: 30rpx 40rpx;
	}

	.busts {
		width: 628rpx;
		height: 80rpx;
		border-radius: 100rpx;
		background: linear-gradient(266.84deg, rgba(0, 20, 255, 1) 0%, rgba(128, 31, 240, 1) 50%, rgba(255, 44, 223, 1) 100%);
		font-size: 32rpx;
		font-weight: 400;
		color: #fff;

	}
</style>